<template>
	<!-- 我的关注 -->
	<view class="attention">
		<view class="content">
			<!-- 添加加载动画 -->
			<uni-load-more v-if="loading" status="loading"></uni-load-more>

			<rmzy v-if="!loading && rmzyData.length > 0" :rmzyData="rmzyData"></rmzy>

			<!-- 暂无数据显示 -->
			<view class="zwxx-img" v-if="!loading && rmzyData.length === 0">
				<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/zwxx.png" mode="widthFix"></image>
				<view>暂无数据</view>
			</view>
		</view>
		<!-- 底部菜单 -->
		<tab-bar :selected='1'></tab-bar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar.vue';
	import Rmzy from '../../components/Rmzy.vue'; // 人脉资源
	export default {
		components: {
			TabBar,
			Rmzy
		},
		data() {
			return {
				// 人脉资源
				rmzyData: [],
				loading: false // 添加loading状态
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
		onLoad() {
			this.initGz()
		},
		methods: {
			async initGz() {
				this.loading = true // 开始加载
				try {
					const requestData = {
						userId: this.userInfo.guid
					};
					const res = await this.$api.infoCardInfoAttention(requestData);
					if (res.succ) {
						console.log('关注', res.data)
						this.rmzyData = res.data
					}
				} catch (error) {
					console.error('获取关注列表失败:', error)
				} finally {
					this.loading = false // 结束加载
				}
			},
		}
	}
</script>

<style lang="less">
	.attention {
		height: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #FAEBDB 0%, rgba(255, 247, 238, 0) 500rpx);
		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-bottom: 30rpx;
			overflow: auto;
		}
	}

	// 添加无数据样式
	.zwxx-img {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;

		image {
			width: 300rpx;
		}

		view {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
</style>